<template>
  <div
    class="search-bar"
    @click="
      (e) => {
        stopEvent(e)
      }
    "
  >
    <!-- :style="`width:${formWidth};`" -->
    <el-form
      ref="formModel"
      class="search-bar-form"
      label-position="right"
      :label-width="labelWidth"
      :model="formModel"
      :inline="true"
    >
      <el-form-item
        v-for="item in searchData"
        ref="formItemWrap"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :rules="item.rules"
        class="form-item-wrap"
        :label-width="item.width || null"
      >
        <el-date-picker
          v-if="item.type === 'daterange'"
          v-model="formModel[item.prop]"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 375px"
        />

        <el-date-picker
          v-else-if="item.type === 'monthrange'"
          v-model="formModel[item.prop]"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :class="item.class || ''"
        />

        <el-date-picker
          v-else-if="item.type === 'datetimerange'"
          v-model="formModel[item.prop]"
          type="datetimerange"
          range-separator="至"
          start-placeholder="跟进时间起"
          end-placeholder="跟进时间止"
          :class="item.class || ''"
          style="width: 400px"
        >
          <!-- :picker-options="item.pickerOptions || {}" -->
        </el-date-picker>

        <el-date-picker
          v-else-if="item.type === 'date'"
          v-model="formModel[item.prop]"
          type="date"
          :clearable="false"
          :class="item.class || ''"
          :placeholder="item.placeholder"
        />

        <el-date-picker
          v-else-if="item.type == 'datetime'"
          v-model="formModel[item.prop]"
          type="datetime"
          :placeholder="item.placeholder"
          :class="item.class || ''"
        />

        <div v-else-if="item.type == 'select'">
          <el-select
            v-if="typeof item.event === 'undefined' || item.event == 'false'"
            v-model="formModel[item.prop]"
            :filterable="typeof item.filterable === 'undefined' ? true : item.filterable"
            :clearable="typeof item.clearable === 'boolean' ? item.clearable : true"
            :multiple="item.multiple || false"
            :collapse-tags="item.collapseTags || false"
            :placeholder="item.placeholder"
            :class="item.class || ''"
          >
            <el-option v-for="v in item.option" :key="v.value" :label="v.label" :value="v.value" />
          </el-select>
          <el-select
            v-else-if="typeof item.event != 'undefined' || item.event == 'true'"
            v-model="formModel[item.prop]"
            :filterable="typeof item.filterable === 'undefined' ? true : item.filterable"
            :clearable="typeof item.clearable === 'boolean' ? item.clearable : true"
            :multiple="item.multiple || false"
            :collapse-tags="item.collapseTags || false"
            :placeholder="item.placeholder"
            :class="item.class || ''"
            @change="handleSelectChange"
          >
            <el-option v-for="v in item.option" :key="v.value" :label="v.label" :value="v.value" />
          </el-select>
        </div>
        <el-input
          v-else
          v-model="formModel[item.prop]"
          :placeholder="item.placeholder || ''"
          :class="item.class || ''"
        />
      </el-form-item>

      <div :class="{ 'show-reset': reset, 'search-button-box': true }">
        <el-button class="search-button" @click="handleSearchSubmit">查询</el-button>
        <el-button v-if="reset" class="reset-button" @click="handleSearchReset">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import mixinsModel from '@/mixins/mixinsModel'
export default {
  name: 'LPSearchBar',
  mixins: [mixinsModel],
  props: {
    labelWidth: {
      type: String,
      default: '200px'
    },
    width: {
      type: String,
      default: '100%'
    },
    searchData: {
      type: Array,
      default: () => []
    },
    reset: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      formModel: {},
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      isExpand: false
      // before3ItemWidth: "1000px",
      // searchDomLength: 0
    }
  },
  computed: {
    //   formWidth() {
    //   return `calc( ${this.before3ItemWidth}px + ${this.searchDomLength * 0.07}rem + 15px ) `
    // },
  },
  mounted() {
    // this.computedWidth();
  },
  methods: {
    stopEvent(e) {
      e.stopPropagation()
    },
    handleSearchSubmit() {
      // 移除所有值为空的查询条件
      const resultForm = {}
      Object.entries(this.formModel).forEach(([key, val]) => {
        if (val !== '' && val !== null) {
          resultForm[key] = val
        }
      })
      this.formModel = resultForm
      this.$nextTick(() => {
        this.$emit('handleSearchSubmit')
      })
    },
    handleSearchReset() {
      this.formModel = {}
      this.$nextTick(() => {
        this.$emit('handleSearchReset')
      })
    },
    handleSelectChange() {
      this.$nextTick(() => {
        this.$emit('handleSelectChange')
      })
    }
    // computedWidth() {
    //     this.$nextTick(() => {
    //         const dom = this.$refs.formItemWrap; // document.querySelectorAll(".form-item-wrap")
    //         console.log('DDDDDDD',dom);
    //         this.searchDomLength = dom.length < 3 ? dom.length : 3;
    //         this.before3ItemWidth = 0;
    //         if (dom.length > 2) {
    //             for (let x = 0; x < 3; x++) {
    //                 this.before3ItemWidth =
    //                     parseInt(dom[x].$el.clientWidth) +
    //                     this.before3ItemWidth;
    //             }
    //         } else {
    //             for (let x = 0; x < dom.length; x++) {
    //                 this.before3ItemWidth =
    //                     parseInt(dom[x].$el.clientWidth) +
    //                     this.before3ItemWidth;
    //             }
    //         }
    //     });
    // },
  }
}
</script>

<style lang="scss">
.search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #fff;
  padding-left: 0.25rem;
  padding-top: 0.15rem;
  padding-bottom: 0.1rem;
  margin-bottom: 0.2rem;
  border-radius: 3px;
  // reset el-form-item
  .el-form-item__label {
    font-weight: normal;
    padding-right: 8px;
    float: left;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: right;
    line-height: 1.5;
  }
  .el-form-item {
    display: flex;
    margin-right: 0.2rem;
    margin-bottom: 14px;
  }
  input.el-input__inner {
    width: 2rem;
  }
  //   .el-date-editor {
  //     width: 1.8rem;
  //   }
  // .el-date-editor--datetimerange {
  //   width: 380px;
  // }
  //   .el-date-editor--daterange {
  //     width: 240px;
  //   }
  .el-button--mini {
    padding: 8px 15px;
    margin-top: -1px;
  }
  .el-input--medium input.el-input__inner {
    height: 34px;
    line-height: 34px;
  }
}
.search-bar-form {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding-top: 15px;
  width: 100%;
  height: 100%;
  // .form-item-wrap {
  //   flex-grow: 1;
  // }
  .search-button-box {
    display: flex;
    margin-left: auto;
    margin-right: 0.25rem;
    // margin-bottom: 14px;

    .search-button {
      color: $light_text;
      background-color: $light-blue;
    }

    .reset-button {
      background-color: #fff;
      color: #000000;
    }
  }
}

.search-button-box {
  display: flex;

  margin-left: 30px;
  margin-bottom: 14px;
  // position: absolute;
  // top: 0;
  // right: 30px;
  .search-button {
    color: $light_text;
    // border-color: $light-blue;
    background-color: $light-blue;
    // padding: 12px 36px;
  }
  //   &.gt-index {
  //     right: -110px;
  //   }
  //   &.show-reset {
  //     right: -150px;
  //   }
  //   &.gt-index.show-reset {
  //     right: -190px;
  //   }
  .reset-button {
    background-color: #fff;
    color: #000000;
    // padding: 12px 36px;
  }
}
.search-bar-expand {
  margin: 0 10px;
  cursor: pointer;
}
</style>
